import { useSearchParams } from 'react-router-dom'
import './index.scss'
import { getBlogByLabelAPI } from '@/api/search'
import { useEffect, useState } from 'react'
import Article from '@/components/Article'
import { Card } from 'antd'

const BlogList = () => {
  const [searchParams] = useSearchParams()
  const query = searchParams.get('query')

  const [blogList, setBlogList] = useState([])
  const getSearchBlogInfo = async () => {
    const res = await getBlogByLabelAPI(query)
    setBlogList(res.data)
  }
  useEffect(() => {
    getSearchBlogInfo()
  }, [query])
    return (
        <div className="blog-list">
            {<Card
             title={query}>
            <Article
            blogList={blogList}/>
            </Card>
            }
        </div>
    )
}

export default BlogList